u-fit/frontend/pages/timer/[id].tsx

//import initialData from '../../initial-data'
import { Timer } from '../../src/timer'
import { useRouter } from 'next/router'
import { useTrainingQuery } from '../../src/gql'
import { Page } from '../../src/app'

const TimerPage = () => {
  const router = useRouter()
  const { id } = router.query

  const { data, error, loading } = useTrainingQuery({
    variables: { id: typeof id === 'string' ? id : id[0] },
  })

  return (
    <Page>
      {loading && <p>Loading data...</p>}
      {error && <p>Error loading training.</p>}
      {data?.training && <Timer training={data.training} />}
    </Page>
  )
}

export default TimerPage